import React from 'react'
import { Icon, Button, WhiteSpace } from 'antd-mobile'
import './index.less'
/**
 *      <TransactionPassword title="验证交易密码" isShow={this.state.isShow} />
 * */
// ========================================
class TransactionPassword extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            isShow: 'none'
        };
    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            isShow: nextProps.isShow
        });
    }
    closeFun = () => {
        this.setState({
            isShow: 'none'
        });
    };
    
    jumpToPwdKey = () => {
    	let backAction = this.props.nextAction || '';
	  	if(backAction){
	  		backAction();
	  		return false;
	  	}
    }
    
    render() {
        let smsWidth = window.screen.width;
        let smsHeight = window.screen.height;
        
        return (
            <div id="transactionPassword" style={{ width: smsWidth, height: smsHeight, display: this.state.isShow}}>
                <div className="transactionPassword-shadow"></div>
                <div className="transactionPassword-content">
                    <div className="transactionPassword-title">
                        {this.props.title}
                        <Icon type="cross" className="transactionPassword-times" onClick={this.closeFun} />
                    </div>
                    <div className="transactionPassword-notice">
                        请输入银行账号（<span>**5118</span>）的交易密码
                    </div>
                    <div className="transactionPassword-pass">
                        <div>*</div>
                        <div>*</div>
                        <div>*</div>
                        <div>*</div>
                        <div>*</div>
                        <div>*</div>
                    </div>
                    <WhiteSpace size="lg" /><WhiteSpace size="lg" /><WhiteSpace size="lg" />
                    <WhiteSpace size="lg" /><WhiteSpace size="lg" /><WhiteSpace size="lg" />
                    <div className="btnGroup-one"  style={{position: 'absolute', bottom: '60px', left: 0}}>
                        <Button type="primary" className="btnGroup-one-btn"
                                onClick={this.jumpToPwdKey.bind(this)}>下一步</Button>
                    </div>
                </div>
            </div>
        );
    }
}
// ========================================
export default TransactionPassword;